<template>
    <div class="toutiao">
        <div class="img-wrapper">
<img src="https://img.tuguaishou.com/ips_templ_preview/2d/de/73/lg_2955149_1614915704_6041a878e3c9e.jpg!w1024_w?auth_key=2269214668-0-0-3fceae4c2e6277d5e29e65f8872bcd18">
        </div>
        <div class="content-wrapper">
            <div class="item" v-for="t of toutiaoNews">
                <div class="left">
                    <img :src="t.thumbnail_pic_s" alt="">
                </div>
                <div class="right">
                    <h1 class="title">{{t.title}}</h1>
                    <div class="text-wrapper">
                        <span class="category-text">{{t.category}}</span>
                        <span class="date-text">{{t.date}}</span>
                    </div>
                </div>
            </div>

        </div>
    </div>
</template>

<script>
import axios from "axios"

export default {
    name: "toutiao_news",
    data(){
        return{
            toutiaoNews:[]
        }
    },
    methods:{
        _initToutiaoNews(){
            axios.get('/juheNews',{
                params:{key:"b9a9a27643a329b567b62fa166450b15"}
            }).then(res=>{
                if(res.data.error_code == 0){
                    this.toutiaoNews=res.data.result.data;
                    console.log(this.toutiaoNews)

                }else {
                    alert("请求失败")
                }
            })
        }
    },
    created() {
        this._initToutiaoNews()
    }
}
</script>

<style scoped lang="stylus">
.toutiao
    .img-wrapper
        margin-top 10px
        width 100%
        height 70px
        img
            width 90px
            height 70px
    .content-wrapper
        margin 10px
        .item
            display flex
            width 100%
            height 80px
            padding 0 4px
            border-bottom 1px dotted #2d3a4b
            .left
                width 80px
                height 80px
                img
                    width 100%
                    height 100%

            .right
                display flex
                flex-wrap wrap
                box-sizing border-box
                padding-left 15px
                align-content space-between
                .text-wrapper
                    margin-left:20px ;


</style>
